<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="format-detection" content="telephone=no">
		<title>51微贷</title>
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css">
		<link rel="stylesheet" type="text/css" href="../../css/reset.css">
		<link rel="stylesheet" type="text/css" href="../../css/common.css">
		<link rel="stylesheet" type="text/css" href="../../css/icomoon/style.css">
		<script type="text/javascript" src="../../js/rem.js"></script>
	</head>
	<body>
		<div class="m-project m-project-1">
			<div class="hd f-pr">
				<h3 class="title">
					<!-- add <i class="sign">新</i> 约标<i class="sign sign2">约</i>  -->
					<span><i class="sign">新</i>新手标-2017030801</span>
					<i class="icon-angle-left f-fl"></i>
				</h3>
				<div class="rate-box">
					<p class="high-color">9.2<span>%</span></p>
					<p>预期收益</p>
				</div>
				<div class="tabs f-pa">
					<p>
						<span>2个月</span>
						<span>期限</span>
					</p>
					<p>
						<span>200,000</span>
						<span>项目总额(元)</span>
					</p>
					<p>
						<span>25</span>
						<span>已购人数</span>
					</p>
				</div>
			</div>
			<div class="percent-box">
				<div class="detail">
					<p class="percent-bar f-pr">
						<span class="child f-pa" style="width: 60%;"></span>
					</p>
					<!-- 正常标显示 -->
					<p class="info hide clearfix">
						<span class="f-fl">购买进度<span class="color">65%</span></span>
						<span class="f-fr">剩余可投<span class="color">125,000</span>元</span>
					</p>
					<!-- 约标显示 -->
					<p class="info clearfix">
						<span class="f-fl">剩余时间：<span class="color">1天9时46分44秒</span></span>
						<span class="f-fr">约标人：<span class="color">136****3321</span></span>
					</p>
				</div>
			</div>
			<div class="project-tabs">
				<a href="javascript:;" class="tab">
					<img src="../../images/project-icon-1.png">
					<span>利率高</span>
				</a>
				<a href="javascript:;" class="tab">
					<img src="../../images/project-icon-2.png">
					<span>车辆抵押</span>
				</a>
				<a href="javascript:;" class="tab">
					<img src="../../images/project-icon-3.png">
					<span>无限购</span>
				</a>
				<a href="javascript:;" class="tab">
					<img src="../../images/project-icon-4.png">
					<span>安全保障</span>
				</a>
			</div>
			<ul class="info-list">
				<li>
					<img src="../../images/project-icon-14.png">
					<span>项目介绍</span>
					<i class="icon-angle-right f-fr"></i>
				</li>
				<li>
					<img src="../../images/project-icon-13.png">
					<span>风控措施</span>
					<i class="icon-angle-right f-fr"></i>
				</li>
				<li>
					<img src="../../images/project-icon-12.png">
					<span>投标记录</span>
					<span class="f-fr">
						<small>已购人数：25</small>
						<i class="icon-angle-right f-fr"></i>
					</span>
				</li>
				<li>
					<img src="../../images/project-icon-6.png">
					<span>项目历程</span>
					<i class="icon-angle-right f-fr"></i>
				</li>
			</ul>
			
			<div class="invest-box">
				<span class="calculation f-fl" id="count"><img src="../../images/project-icon-9.png"></span>
				<a href="javascript:;" class="invest-btn">立即投资</a>
			</div>
		</div>

		<div class="overlay" id="overlay">
			<div class="modal modal-cal" id="modal-cal">
				<h3 class="f-pr">
					<span>收益计算器</span>
					<a class="close f-pa" id="close"></a>
				</h3>
				<div class="cal clearfix">
					<p class="f-fl">
						<span>0.00</span>
						<span>预计总收益(元)</span>
					</p>
					<p class="f-fr">
						<span>2</span>
						<span>投资期限(月)</span>
					</p>
				</div>
				<div class="ipt-box f-pr">
					<span>充值金额：</span>
					<input type="num" class="f-pa" placeholder="请输入投资金额">
					<i class="close-icon f-pa"></i>
				</div>
			</div>
		</div>
		
		<div class="overlay" id="overlay1">
			<div class="modal pmodal" id="pmodal">
				<p class="title">请输入约标密码</p>
				<p>请输入6位约标密码</p>
				<div class="box"></div>
			</div>
		</div>

		<script type="text/javascript" src="../../js/zepto.min.js"></script>
		<script type="text/javascript" src="../../js/mui.min.js"></script>
		<script type="text/javascript" src="../../js/password.js"></script>

		<script type="text/javascript">
			$(function(){
	            getCount();
	            getPasswordBox();

	            function getCount(){
	            	var $pop = $("#overlay");

		            function modalHidden($ele) {
		                $ele.removeClass("modal-in");
		                $ele.one("transitionend", function() {
		                    $ele.css("display", "none");
		                    $pop.removeClass("active");
		                });
		            }

	            	$("#count").on("tap", function() {
		                $pop.addClass("active");
		                var $modal = $("#modal-cal");
		                $modal.css("display", "block");
		                $modal.addClass("modal-in");

		                $("#close").on("tap", function(e) {
		                    modalHidden($modal);
		                    e.stopPropagation();
		                });

		                $("#overlay").on("tap", function(e) {
		                    if (e.target.classList.contains("overlay")) {
		                        modalHidden($modal);
		                    }
		                });
		            });
	            }
			});
		</script>
	</body>
</html>